/* GAME CONTAINER */
body
{
	font-family: 'Press Start 2P', cursive;
	overflow: hidden;
	background: #000;
	background-image: url("../assets/bg.png");
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	touch-action: none;
}

canvas
{
	display: block;
	background-image: url("../assets/bg.png");
	background-size: cover;
	background-blend-mode: overlay;
	background-color: #9de1e6;
}

/* UI */
#assets { display: none; margin: auto;}

.decals {
	position: fixed;
	bottom: 0;
}

.left {
	left: 0;
	height: 37%;
}

.right {
	right: 0;
	height: 45%;
	margin-right: 10px;
}

.game-ui
{
	text-shadow: 2px 2px 0px #000;
	pointer-events: none;
}

#menu-screen {
	background-image: url("../assets/bg.png");
	background-size: cover;
	background-blend-mode: multiply;
	background-color: #172554;
}

#instructions {
	margin :auto;
	font-size: 1em;
}

#instructions img {
	display: inline;
	margin: 2px;
}

#instructions button {
	font-size: 1.1em;
}

/* FLOOD WARNING */
#warning-overlay
{
	display: none;
	animation: flash 0.7s infinite;
}

@keyframes flash
{
	0% { opacity: 0; }
	35% { opacity: 0.4; }
	40% { opacity: 0.4; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

/* POP-UP EVENTS */
.rescue-pop, .hp-pop, .dmg-pop
{
	position: absolute;
	font-size: 10px;
	pointer-events: none;
	animation: floatUp 0.8s forwards;
	z-index: 20;
}
.rescue-pop { color: #fbbf24; }
.hp-pop { color: #22c55e; }
.dmg-pop { color: #db4444; }


@keyframes floatUp
{
	0% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(-50px); opacity: 0; }
}